<template>
	<view style="width: 100%;">
		<base-headers/>
		<view class="nav">
			<!-- 选项卡水平方向滑动-->
			<scroll-view class="tab-scroll" scroll-x scroll-with-animation>
				<view class="tab-scroll_box">
					<!-- 选项卡类别列表 -->
					<view class="tab-scroll_item" v-for=" (item,index) in category" :key="index"
						:class="{'active':isActive==index}" @click="checked(index)">
						{{item.itemTitle}}
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 首页内容 -->
		<recommend/>
		<base-footers/>
		<top-button :top="top"/>
	</view>
	<!-- 	<video-list></video-list> -->
</template>

<script>
	import recommend from '../../subpages/recommend/recommend.vue'
	import {
		getAllNavigation
	} from '../../api/api'
import { debounce } from '../../utils/util'
	export default {
		components: {
			recommend
		},
		data() {
			return {
				// 选项卡点击标识
				isActive: 'l',
				// 选项卡数据
				category: [],
				// top距离
				top:0
			}
		},
		onLoad() {
			// 获取tar-bars数据
			getAllNavigation().then(res => {
				this.category = res.data
				uni.setStorageSync("allNavigation", res.data)
			})
		},
		methods: {
			// tar-bar跳转
			checked(index) {
				this.isActive = index;
				uni.navigateTo({
					url: '../../subpages/news/news?title=' + this.category[index].itemTitle,
				})
			},
			
		},
		onPageScroll(e) {
			debounce(()=>{
				this.top = e.scrollTop
			})
		},
	}
</script>

<style lang="scss">
	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	/deep/.uni-scroll-view::-webkit-scrollbar {
		display: none
	}

	page {
		height: 100%;
		display: flex;
		background-color: #FFFFFF;
	}

	.content {
		display: flex;
		flex-direction: column;
	}

	.nav {
		border-top: 1rpx solid #f2f2f2;
		background-color: #F7F8F9;

		position: relative;
		width: 100%;
		align-items: center;
		height: 86rpx;

		.tab-scroll {
			flex: 1;
			overflow: hidden;
			box-sizing: border-box;

			.tab-scroll_box {
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				box-sizing: border-box;

				.tab-scroll_item {
					height: 40px;
					line-height: 40px;
					box-sizing: border-box;
					padding: 0 15px;
					flex-shrink: 0;
					// padding:0 5px 10px;
					display: flex;
					justify-content: center;
					font-size: 15px;
					font-family: Noto Sans S Chinese;
					color: #5A5A5A;
				}

				.active {
					position: relative;
					color: #ba0825;
					font-weight: 600;
					// font-size: 18px;
					// justify-content: center;
					font-family: Noto Sans S Chinese;
				}

				.active::after {
					content: "";
					position: absolute;
					width: 30upx;
					height: 4upx;
					background-color: #BA0825;
					left: 0;
					right: 0;
					bottom: 0;
					margin: 0 auto;
				}
			}
		}
	}
</style>
